@import './variables.module.scss';
@import './base.scss';

.page-main{
  // margin: 24px 24px 24px 24px;
  // background-color: white;
  width: 100%;;
  border-radius: 2px;
  .layout-padding-view{
    padding: 15px;
  }
  .header{
    border-bottom: 1px solid whitesmoke;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom:15px;
    margin-bottom: 15px;
    .title{
      font-size: 18px;
      color: $titleColor;
      font-weight:bold;
      // line-height: 40px;
      // margin-left: 20px;
      margin-bottom: 0;
    }
    .tool{
      margin-right: 20px;
      line-height: 40px;
    }
  }
  .page-container{
    // padding:
  }
}
@media screen and (max-width: 786px) {
  .page-main{
    .header{
      display:block;
      .tool{margin:0 20px;}
    }
  }
}
//搜索栏
.search-form{
  padding:0 15px;
  &.el-form--inline{
    .el-form-item{display:flex; width: 100%;margin-bottom:15px;margin-right:0px;height:32px;}
    .el-form-item__content{display:block;flex:1;}
    .el-form-item__label{padding:0}
    .el-cascader{display:block;}
    .el-select,.el-date-editor--daterange.el-input__inner{width:100%;}
    
  }
  .search-cascader{
    .el-input .el-input__inner{height:32px!important;}
  }
  // .el-button--default{
  //   border-color:$mainColor;color:$mainColor;
  //   &:hover{
  //       border-color:$mainColor;
  //   }
  // }
}
//弹窗表单
.dialog{
  &-form{
    .el-col{margin-bottom:18px;}
    .el-select,.el-date-editor.el-input{width:100%;}
    .el-form-item.is-error .el-input__inner,.el-form-item.is-error .el-input__inner:focus{
      border-color:#dcdfe6;
    }
    .el-form{
      // .el-form-item__label{text-align:left;}
      .no-label{
        .el-form-item__content{margin-left:0 !important;}
      }
    }
    .dialog-footer{text-align:center;}
    .el-dialog__body{
      max-height:600px;
      overflow:auto;
    }
    .form-title{
      display:flex;justify-content: space-between;margin:15px 0;padding-bottom:10px;border-bottom:1px solid $lineColor;
      h4{margin:0;font-size:16px;color:#303133;}
      &:first-child{
        margin-top:0;
      }
    }
    .el-form-item.is-error{
      .el-input__inner:focus,.el-textarea__inner:focus{
        border-color:$mainColor;
      }
      .el-textarea__inner{
        border-color:#dcdfe6;
      }
    }
    .el-form-item--small{
      .el-form-item__content{
        height:32px;
      }
      &.height-auto{
        .el-form-item__content{
          height:auto;
        }
      }
    }
    .check-group{
      &::after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
      }
      .el-checkbox{
        float:left;
        .el-checkbox__label{
          line-height:16px;
        }
      }
    }
  }
}
.page-main-lr{
  .flex-wrap{
    display:flex;justify-content: space-around;align-items: stretch;height:100%;
    .content-wrap{
      flex:1;overflow:hidden;text-align:center;height:100%;
      .el-scrollbar__view{padding-right:20px;}
    }
  }
  .el-scrollbar{
    overflow-y: auto;
  }
  .el-scrollbar__wrap{overflow-x: hidden;}
  .form-search{  
     width:320px;padding-left:20px;margin-left:0px;border-left:1px solid $lineColor;
    .el-form .el-form-item{
      height:auto;
      .el-button{margin: 0 8px 8px 0;}
    }
  }
  .collapse-search{
    position:absolute;z-index:10;right:0;top:50%;transform:translateY(-50%);padding:16px 2px;background:$mainColor;color:#fff;border-radius:4px 0 0 4px;cursor:pointer;
  }
}

.sku-form{
  .el-input-group__append{padding:0;}
}

.order-status-{
  &1{background-color:$blue-link;border-color:$blue;color:$blue;}
  &2{background-color:$pink-link;border-color:$pink;color:$pink;}
  &3{background-color:$yellow-link;border-color:$yellow;color:$yellow;}
  &4{background-color:$purple-link;border-color:$purple;color:$purple;}
  &5{background-color:$green-link;border-color:$green;color:$green;}
  &6{background-color:$red-link;border-color:$red;color:$red;}
  &7{background-color:$panGreen-link;border-color:$panGreen;color:$panGreen;}
}

.page-statistics{
  padding:15px;
  .hd,.bd{
    padding:15px;border-radius:8px;background:#fff;margin-bottom:15px;
  }
  .hd{
    h3{font-size:18px;font-weight:bold;color:#303133;
      .sub-title{font-size:14px;font-weight: normal;color:#999;}
    }
  }
  .search{
    margin-bottom:15px;
  }
  .list{
    display: flex;justify-content: space-around;text-align:center;
    .value{font-size:24px;padding-top:10px;
      i{font-style: normal;font-size:14px;}
    }
  }
  .row-1{
    margin-bottom:15px;
    .list{padding:15px;border-radius:8px;background:#fff;height:142px;
      &+.list{margin-top:15px;}
      .item{
        flex:1;position:relative;
        &:first-child{border-right:1px solid #dcdfe6;}
        .content{
          position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);
        }
      }

    }
  }
  .row-3{
    background:#FFF;margin-bottom:15px;border-radius: 8px;overflow: hidden;
  }
  .row-block{
    background:#fff;padding:15px;border-radius:8px;margin-bottom:15px;
  }
  .echarts-block{
    padding:15px;border-radius:8px;background:#fff;
  }
  .chart-info{
    height:200px;
  }
}

@media screen and (max-width: 765px) {
  .page-statistics{
    .row-1{
      .list:first-child{
        margin-top:15px;
      }
    }
    .row-2{
      .list{
        display:block;
        &>div{border-bottom:1px dashed #dcdfe6;margin-bottom:30px;padding-bottom:20px;
         &:last-child{border-bottom:none;}
        }
      }
    }

  }
}

/* 定义放大缩小的动画 */
@keyframes zoom {
  0% {
    transform: scale(1); /* 动画开始时的缩放值 */
  }
  50% {
    transform: scale(2); /* 动画中间时的缩放值 */
  }
  100% {
    transform: scale(1); /* 动画结束时的缩放值 */
  }
}
.page-evaluate{

  &-form{
    .step-list{
      display: flex;justify-content: space-between;position: relative;margin-bottom:30px;
      &::after{
        content:'';height:1px;background:#999;width: 100%;position: absolute;top:10px;z-index:1;
      }
      .item{background:#fff;position: relative;z-index:2;padding:0 20px;}
      h6{font-size:16px;}
      .status{width:24px;height:24px;border-radius:50%;background:$mainColor;color:#fff;position: relative;margin-right:15px;
        span,.el-icon{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);}
      }
    }
    
    .step-content{
      position:relative;
      .mask{
        position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.03);z-index:1000;top:0;left:0
      }
    }
    .step-block{
      .hd{
        font-size:18px;margin:0 0 20px 20px;font-weight: bold;
        .tips{font-weight: normal;font-size:14px;}
      }
      .item{
        margin-bottom:15px;
        
      }
      .el-row{
        padding-bottom:10px;
      }
      .el-col{
        margin-bottom:10px;
      }
    }
    .stage-block{
      position: relative;text-align:center;
      .img-block{display:inline-block;position:relative;}
      img{margin:0 auto;}
      .point{
        position: absolute;background:rgba(255,0,0,0.5);
        &-head{
          width:50px;height:70px;top:2%;left:39%;z-index:1;
        }
        &-hand{
          width:200px;height:150px;top:19%;left:4%;z-index:2;
        }
        &-chest{
          width:70px;height:90px;top:19%;left:33%;z-index:3;
        }
        &-leg{
          width:86px;height:210px;top:42%;left:29%;z-index:4;
        }
        &-type{
          width:10px;height:10px;border-radius:50%;border:1px solid #fff;
          .point-animation{
            width:10px;height:10px;position: absolute;border-radius:50%;border:1px solid #fff;top:0;left:0;z-index:999;font-size:12px;
            animation: zoom 2s infinite; /* 动画名称，持续时间，动画次数 */
          }
          .point-txt{
            position: absolute;left:15px;top:-4px;z-index:999;font-size:12px;width: 100px;text-align: left;color:#000000;z-index:998;text-shadow: 1px 1px 1px #ffffff;
            // animation: zoom 2s infinite;
          }
        }
        &-video{
          background:rgba(255,0,0,0.7);
        }
        &-AN{
          background:#FFC312;
          &-CP1{top:10%;left:29%}
          &-CP2{top:12%;left:27.8%}
          &-CP3{top:15.6%;left:28.4%}
          &-CL{top:18%;left:28%}
          &-HU{top:21%;left:34.8%}
          &-CU{top:26%;left:36.4%}
          &-CA{top:37%;left:39.6%}
          &-DI{top:47%;left:43%}
          &-SC{top:23%;left:33.6%}
          &-TH{top:30%;left:32%}
          &-LU{top:42%;left:30.8%}
          &-PV{
            top:44%;left:26%;
            &:last-child{top:44%;left:32%}
          }
          &-CX{top:48%;left:26%}
          &-GE{top:52%;left:33%}
          &-TA{top:78%;left:32%}
          &-PE{top:91%;left:33%}
        }

        &-RE{
          background:#C4E538;
          &-CP1{top:7.6%;left:30.8%}
          &-CP2{top:5%;left:30.8%}
          &-CP3{top:10.4%;left:74.8%}
          &-CL{top:15.8%;left:75.6%}
          &-TH{top:23.4%;left:72.3%}
          &-CU{top:28.4%;left:64.4%}
          &-CA{top:43.4%;left:61%}
          &-DI{top:50%;left:59%}
          &-SC{top:18%;left:72.7%}
          &-HU{top:22.8%;left:69.4%}
          &-LU{top:39.4%;left:73%}
          &-PV{top:41%;left:75%;}
          &-CX{top:48.2%;left:72.4%}
          &-GE{top:57%;left:76.8%}
          &-TA{top:77%;left:70%}
          &-PE{top:90%;left:69.6%}
        }


        &-IR{
          background:#12CBC4;
          &-CP1{top:8.3%;left:28.4%}
          &-CP2{top:10.8%;left:26.8%}
          &-CP3{top:12.6%;left:26.8%}
          &-CL{top:19%;left:28%}
          &-HU{top:25.8%;left:21.8%}
          &-CU{top:38%;left:17.4%}
          &-CA{top:41.6%;left:15.4%}
          &-DI{top:50%;left:13%}
          &-TH{top:28%;left:33%}
          &-SC{top:21%;left:25.2%}
          &-LU{top:33.4%;left:24.6%}
          &-CX{top:50.8%;left:27%}
          &-GE{top:64.2%;left:27.7%}
          &-TA{top:76%;left:30.8%}
          &-PE{top:90%;left:31.2%}
          &-PV{top:49%;left:33%}
        }
        
        &-ER{
          background:#FDA7DF;
          &-CP1{top:10.8%;left:31.8%}
          &-CP2{top:8.6%;left:27%}
          &-CP3{top:11.2%;left:72.5%}
          &-CL{top:13%;left:75.4%}
          &-SC{top:15.8%;left:72.4%}
          &-HU{top:21.4%;left:66.8%}
          &-CU{top:32%;left:63.6%}
          &-CA{top:42%;left:60.6%}
          &-DI{top:50%;left:58.4%}
          &-TH{top:21.6%;left:73%}
          &-LU{top:35%;left:71%}
          &-PV{top:43%;left:70%}
          &-CX{top:48.2%;left:70%}
          &-GE{top:63%;left:69.4%}
          &-TA{top:77.6%;left:69.4%}
          &-PE{top:88.6%;left:69.8%}
        }

        &-LA{
          background:#ED4C67;
          &-CP1{top:9.6%;left:27.4%}
          &-CP2{top:7.2%;left:26.8%}
          &-CP3{top:12.4%;left:27.6%}
          &-CL{top:17%;left:27.4%}
          &-SC{top:18%;left:31.2%}
          &-HU{top:21.3%;left:20.4%}
          &-CU{top:30.4%;left:19%}
          &-CA{top:36%;left:16.4%}
          &-DI{top:49.2%;left:57%}
          &-TH{top:31%;left:33.6%}
          &-LU{top:38%;left:71.4%}
          &-PV{top:45.4%;left:71%}
          &-CX{top:53.2%;left:24%}
          &-GE{top:60%;left:24%}
          &-TA{top:79%;left:31.4%}
          &-PE{top:89.2%;left:32.4%}
        }

        &-ME{
          background:#EA2027;
          &-CP1{top:10.6%;left:29.2%}
          &-CP2前{top:12.4%;left:30%}
          &-CP2后{top:7%;left:29.8%}
          &-CP3前{top:15.8%;left:29.6%}
          &-CP3后{top:10.8%;left:74%}
          &-CL前{top:20.6%;left:29.5%}
          &-CL后{top:14%;left:73.8%}
          &-HU{top:29.6%;left:35.2%}
          &-CU{top:33%;left:36.4%}
          &-CA{top:42.6%;left:40%}
          &-DI{top:47%;left:41.2%}
          &-SC{top:27.8%;left:23%}
          &-TH前{top:24%;left:29.6%}
          &-TH后{top:23%;left:74.5%}
          &-LU前{top:34.4%;left:30%}
          &-LU后{top:35%;left:74.2%}
          &-PV前{top:44%;left:29.6%;}
          &-PV后{top:47%;left:74%;}
          &-CX{top:54.8%;left:30.4%}
          &-GE{top:64%;left:30%}
          &-TA{top:77.8%;left:75.69%}
          &-PE{top:90%;left:76%}
        }

        &-ANME{
          background:#009432;
          &-CP1{top:11%;left:30.2%}
          &-CP2{top:12%;left:29%}
          &-CP3{top:14%;left:29.2%}
          &-CL{top:18.2%;left:28%}
          &-HU{top:24%;left:35.3%}
          &-CU{top:36%;left:18%}
          &-CA1{top:44%;left:15%}
          &-CA2{top:46.4%;left:14%}
          &-DI1{top:48%;left:13%}
          &-DI2{top:50%;left:13%}
          &-SC1{top:21%;left:32%}
          &-SC2{top:23%;left:32%}
          &-TH1{top:21%;left:27.2%}
          &-TH2{top:25%;left:28.6%}
          &-TH3{top:27%;left:29%}
          &-LU1{top:30%;left:29%}
          &-LU2{top:35%;left:29%}
          &-LU3{top:39%;left:29%}
          &-PV1{top:41%;left:29%;}
          &-PV2{top:44%;left:29%;}
          &-PV3{top:47%;left:28.6%;}
          &-CX{top:50%;left:28%}
          &-GE1{top:65.4%;left:30.4%}
          &-GE2{top:68.6%;left:30.4%}
          &-GE3{top:71%;left:31%}
          &-TA1{top:80%;left:30.4%}
          &-TA2{top:82%;left:30.6%}
          &-PE1{top:84.4%;left:25.6%}
          &-PE2{top:86%;left:30.4%}
          &-PE3{top:89%;left:31%}
        }

        &-ANLA{
          background:#0652DD;
          &-CP1{top:9%;left:27.4%}
          &-CP2{top:11%;left:27.4%}
          &-CP3{top:13%;left:27.8%}
          &-CL{top:12%;left:26.8%}
          &-SC1{top:16%;left:27.8%}
          &-SC2{top:19%;left:26.8%}
          &-HU{top:25%;left:19.6%}
          &-CU{top:34%;left:17.4%}
          &-CA1{top:43%;left:14.4%}
          &-CA2{top:46%;left:13.6%}
          &-DI1{top:48%;left:12.6%}
          &-DI2{top:50%;left:11.4%}
          &-TH1{top:26.6%;left:24.4%}
          &-TH2{top:29%;left:23.4%}
          &-LU1{top:32.4%;left:27.4%}
          &-LU2{top:36%;left:27.4%}
          &-LU3{top:60%;left:25.4%}
          &-PV1{top:41%;left:27.8%;}
          &-PV2{top:46%;left:28.4%;}
          &-PV3{top:77%;left:15.4%;}
          &-CX1{top:45%;left:25.4%}
          &-CX2{top:46.8%;left:33%}
          &-GE1{top:67%;left:25.4%}
          &-GE2{top:70%;left:33.4%}
          &-GE3{top:74%;left:33.4%}
          &-TA1{top:81%;left:32.4%}
          &-TA2{top:84%;left:31.4%}
          &-PE1{top:87%;left:25.4%}
          &-PE2{top:89.6%;left:25.4%}
          &-PE3{top:91.4%;left:25.4%}
        }

        &-REME{
          background:#9980FA;
          &-CP1{top:4.8%;left:29.4%}
          &-CP2{top:5%;left:73.4%}
          &-CP3{top:8%;left:73.6%}
          &-CL{top:12%;left:74%}
          &-SC1{top:21.4%;left:70.6%}
          &-SC2{top:20%;left:69.4%}
          &-HU{top:26%;left:67%}
          &-CU1{top:34%;left:64%}
          &-CU2{top:36%;left:63%}
          &-CA1{top:43%;left:61%}
          &-CA2{top:45%;left:59.2%}
          &-DI1{top:48%;left:58%}
          &-DI2{top:51%;left:58%}
          &-TH1{top:19%;left:74.6%}
          &-TH2{top:22%;left:75%}
          &-TH3{top:30%;left:74.4%}
          &-LU1{top:35%;left:74.4%}
          &-LU2{top:39%;left:74.4%}
          &-PV1{top:44%;left:74.2%;}
          &-PV2{top:47%;left:74%;}
          &-CX{top:48%;left:75%}
          &-GE1{top:65%;left:70.6%}
          &-GE2{top:69%;left:71%}
          &-TA1{top:84%;left:71%}
          &-TA2{top:86%;left:71%}
          &-PE1{top:89%;left:71.6%}
          &-PE2{top:87%;left:76%}
          &-PE3{top:88%;left:75%}
        }

        &-RELA{
          background:#833471;
          &-CP1{top:6.8%;left:27.4%}
          &-CP2{top:5.4%;left:27.2%}
          &-CP3{top:8%;left:71.8%}
          &-CL{top:12%;left:72%}
          &-SC1{top:16%;left:75.4%}
          &-SC2{top:18.6%;left:70.4%}
          &-HU{top:25.4%;left:82.3%}
          &-CU{top:35%;left:85%}
          &-CA1{top:42%;left:87.4%}
          &-CA2{top:45%;left:88%}
          &-DI1{top:47%;left:89%}
          &-DI2{top:48%;left:90%}
          &-TH{top:27%;left:71%}
          &-LU{top:37%;left:71%}
          &-PV{top:42%;left:72%;}
          &-CX{top:50.6%;left:70.6%}
          &-GE1{top:64%;left:69%}
          &-GE2{top:69%;left:69.4%}
          &-TA1{top:82%;left:77%}
          &-TA2{top:84.4%;left:77%}
          &-PE1{top:87%;left:77%}
          &-PE2{top:89%;left:76%}
          &-PE3{top:88%;left:70%}
        }

      }
    }
    .problem-analysis{
      padding:10px;border:1px solid #ddd;margin-bottom:15px;
    }
    .records-list{
      li{display: flex;justify-content: space-between;padding-right:30px;
        .label{display: inline-block;line-height:32px;}
      }
    }
    .treatment-records{
      padding:15px 15px 0 15px;background:#f7f7f7;margin-bottom:10px;margin-right:10px;
      .el-descriptions__body{background:none;}
    }
  }
}
.dialog-evaluate{

}
